<template>
    <my-list-space>
        <div id="link-list-box" style="display: none"></div>
        <v-hover
                v-slot:default="{ hover }"
                v-for="item in linkList"
                :key="item.id"
        >
            <v-row class="rounded-lg link-info" :class="{'elevation-3': !hover, 'elevation-10': hover}">
                <v-col cols="8" class="text-truncate" :title="item.description">
                    {{item.description}}
                </v-col>
                <v-spacer></v-spacer>
                <v-col cols="2">
                    {{item.createTime}}
                </v-col>
                <v-col cols="auto">
                    <v-btn icon title="编辑" @click="openEditDialog(item)">
                        <v-icon >mdi-square-edit-outline</v-icon>
                    </v-btn>
                    <v-btn icon title="删除" class="ml-2" @click="openDeleteDialog(item.id)">
                        <v-icon>mdi-delete-empty-outline</v-icon>
                    </v-btn>
                    <v-btn icon title="打开链接" class="ml-2" @click="open(item.url)">
                        <v-icon>mdi-open-in-new</v-icon>
                    </v-btn>
                </v-col>
            </v-row>
        </v-hover>

        <v-dialog
                v-model="deleteDialog"
                persistent
                overlay-opacity="0.2"
                max-width="460px"
        >
            <v-card outlined>
                <my-loading-overlay :loading-overlay="deleteOverlay"></my-loading-overlay>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">确认删除</v-card-title>
                <v-card-text class="text-center mt-4">
                    确认要删除链接吗？
                </v-card-text>
                <v-card-actions>
                    <v-btn class="ml-10" width="160" color="primary" @click="deleteLink()">确认</v-btn>
                    <v-btn class="ml-10" width="160" color="warning" @click="cancelDelete()">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-dialog
                v-model="editDialog"
                overlay-opacity="0.2"
                persistent
                width="600px"
        >
            <div style="width: 600px;background-color: white;">
                <v-form ref="form" style="padding: 20px">
                    <v-container fluid>
                        <my-loading-overlay :loading-overlay="editOverlay"></my-loading-overlay>
                        <v-row>
                            <v-col>
                                <v-text-field
                                        outlined
                                        label="链接"
                                        v-model="link.url"
                                        dense
                                        clearable
                                        autofocus
                                        :value="link.url"
                                        :rules="[linkUrlRule]"
                                >
                                </v-text-field>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col>
                                <v-textarea
                                        v-model="link.description"
                                        outlined
                                        label="描述"
                                        counter
                                        clearable
                                        auto-grow
                                        @keypress.enter="editLink()"
                                        :rules="[linkDescriptionRule]"
                                        :value="link.description"
                                ></v-textarea>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="6">
                                <v-btn block outlined color="primary" @click="editLink()">提交</v-btn>
                            </v-col>
                            <v-col cols="6">
                                <v-btn block outlined color="warning" @click="resetEdit()">取消</v-btn>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-form>
            </div>
        </v-dialog>
    </my-list-space>
</template>

<script>
    import {linkDescriptionRule, linkUrlRule} from "../../../../util/rule";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    import MyListSpace from "../../common/MyListSpace";
    export default {
        name: "MyLinkList",
        components: {MyListSpace, MyLoadingOverlay},
        props: {
            linkList: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                deleteDialog: false,
                editDialog: false,
                deleteOverlay: false,
                editOverlay: false,
                id: 0,
                link: {}
            }
        },
        methods: {
            linkDescriptionRule,
            linkUrlRule,
            openDeleteDialog(id) {
                this.id = id;
                this.deleteDialog = true
            },
            cancelDelete() {
                this.id = 0;
                this.deleteDialog = false;
            },
            deleteLink() {
                let _this = this;
                _this.deleteOverlay = true;
                _this._delete({
                    url: 'system/collection/delete-link',
                    data: {
                        id: _this.id
                    }
                }).then(rsp => {
                    _this.id = 0;
                    _this.deleteDialog = false;
                    _this.$emit("reset-link-list")
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.deleteOverlay = false;
                })
            },
            openEditDialog(item) {
                this.link = JSON.parse(JSON.stringify(item));
                this.editDialog = true;
            },
            resetEdit() {
                this.link = {};
                this.$refs.form.reset();
                this.editDialog = false;
            },
            editLink() {
                let _this = this;
                if (!_this.$refs.form.validate()) {
                    return;
                }
                _this.editOverlay = true;
                _this._put({
                    url: 'system/collection/edit-link',
                    data: {
                        id: _this.link.id,
                        url: _this.link.url,
                        description: _this.link.description
                    }
                }).then(rsp => {
                    _this.$emit("reset-link-list");
                    _this.resetEdit();
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.editOverlay = false;
                })
            },
            open(url) {
                let link = document.createElement("a");
                link.href = url;
                link.target = "_blank"
                let box = document.getElementById("link-list-box");
                box.appendChild(link);
                link.click();
                box.removeChild(link);
            }
        }
    }
</script>

<style scoped>
    .link-info {
        margin: 15px 10px 0;
        height: 60px;
        line-height: 36px;
    }
</style>